<template>
  <div class="header">
    <el-row>
      <!-- 网站logo -->
      <el-col :span="20">
        <div class="logo">医疗药品采购系统</div>
      </el-col>
      <!-- 名称下拉框 -->
      <el-col :span="4">
        <el-dropdown @command="handleDownBoxCommand">
          <span class="el-dropdown-link">
            欢迎您：{{currentUserName}}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="toPersonCenter" v-show="!isAdministrator" icon="iconfont icon-gerenkongjian">个人资料</el-dropdown-item>
            <el-dropdown-item command="editPassword" v-show="!isAdministrator" icon="iconfont icon-xiugaimima">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout" icon="iconfont icon-anquantuichu">安全退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
    <!-- 修改密码弹出层 -->
    <el-dialog title="修改密码" :visible.sync="isEditPassword" @close="handleCloseEditPassword">
      <el-form :model="editPasswordForm" status-icon :rules="editPasswordRules" ref="editPasswordFormRef"
        label-width="100px">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input clearable show-password v-model="editPasswordForm.oldPassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="newPassword">
          <el-input clearable show-password v-model="editPasswordForm.newPassword" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPassword">
          <el-input clearable show-password v-model="editPasswordForm.checkPassword" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEditPassword = false">取 消</el-button>
        <el-button type="primary" @click="editPassword">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 退出登录弹出层 -->
    <el-dialog title="退出登录" :visible.sync="isLogout" width="30%">
      <el-row>
        <el-col :span="3">
          <svg t="1652143687628" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="2184" width="32" height="32">
            <path
              d="M512.003 512.003m-491.986961 0a491.986961 491.986961 0 1 0 983.973922 0 491.986961 491.986961 0 1 0-983.973922 0Z"
              fill="#FDDF6D" p-id="2185"></path>
            <path
              d="M617.431206 931.355819c-271.716531 0-491.984961-220.26843-491.984961-491.984961 0-145.168284 62.886123-275.632538 162.888318-365.684714-159.280311 81.438159-268.320524 247.140483-268.320524 438.312856 0 271.716531 220.26843 491.984961 491.984961 491.984961 126.548247 0 241.924473-47.794093 329.096643-126.298247-67.100131 34.312067-143.12228 53.670105-223.664437 53.670105z"
              fill="#FCC56B" p-id="2186"></path>
            <path
              d="M426.312833 359.704703m-60.044118 0a60.044117 60.044117 0 1 0 120.088235 0 60.044117 60.044117 0 1 0-120.088235 0Z"
              fill="#FFFFFF" p-id="2187"></path>
            <path
              d="M764.373493 359.704703m-60.044117 0a60.044117 60.044117 0 1 0 120.088234 0 60.044117 60.044117 0 1 0-120.088234 0Z"
              fill="#FFFFFF" p-id="2188"></path>
            <path
              d="M300.574587 481.542941c-36.536071 0-66.158129 29.618058-66.158129 66.158129h132.312258c0.004-36.540071-29.618058-66.158129-66.154129-66.158129zM877.629714 472.676923c-36.536071 0-66.158129 29.618058-66.158129 66.156129h132.312258c0.002-36.534071-29.616058-66.156129-66.154129-66.156129z"
              fill="#F9A880" p-id="2189"></path>
            <path
              d="M715.161397 780.223524a20.010039 20.010039 0 0 1-17.504034-10.28002c-18.764037-33.684066-54.342106-54.606107-92.852182-54.606107-37.528073 0-73.512144 21.136041-93.908183 55.158108-5.686011 9.478019-17.976035 12.558025-27.458054 6.874013s-12.558025-17.978035-6.874013-27.458053c27.590054-46.01809 76.73015-74.606146 128.24425-74.606146 53.020104 0 102.000199 28.800056 127.81825 75.160147 5.380011 9.658019 1.914004 21.846043-7.744015 27.226053a19.940039 19.940039 0 0 1-9.722019 2.532005z"
              fill="#7F184C" p-id="2190"></path>
            <path
              d="M750.475466 58.816115c-9.786019-5.15801-21.886043-1.406003-27.038053 8.368016-5.15801 9.778019-1.410003 21.882043 8.368016 27.038053 155.540304 82.01216 252.166493 242.094473 252.166493 417.776816 0 260.246508-211.726414 471.970922-471.970922 471.970922S40.030078 772.247508 40.030078 511.999 251.754492 40.030078 511.999 40.030078c11.056022 0 20.014039-8.962018 20.014039-20.014039S523.055022 0 511.999 0C229.680449 0 0 229.682449 0 511.999s229.680449 511.999 511.999 511.999 511.999-229.680449 511.999-511.999C1024.002 321.424628 919.191795 147.774289 750.475466 58.816115z"
              fill="" p-id="2191"></path>
            <path
              d="M506.386989 359.712703c0-44.144086-35.91407-80.058156-80.058156-80.058157s-80.058156 35.91407-80.058157 80.058157 35.91407 80.058156 80.058157 80.058156 80.058156-35.91407 80.058156-80.058156z m-80.058156 40.028078c-22.072043 0-40.030078-17.958035-40.030079-40.030078s17.958035-40.030078 40.030079-40.030079 40.030078 17.958035 40.030078 40.030079-17.958035 40.030078-40.030078 40.030078zM764.373493 439.770859c44.144086 0 80.058156-35.91407 80.058156-80.058156s-35.91407-80.058156-80.058156-80.058157-80.058156 35.91407-80.058156 80.058157 35.91407 80.058156 80.058156 80.058156z m0-120.088235c22.072043 0 40.030078 17.958035 40.030078 40.030079s-17.958035 40.030078-40.030078 40.030078-40.030078-17.958035-40.030078-40.030078 17.956035-40.030078 40.030078-40.030079zM476.564931 749.915465c-5.684011 9.478019-2.608005 21.774043 6.874013 27.458053 9.482019 5.684011 21.770043 2.604005 27.458054-6.874013 20.39804-34.024066 56.38211-55.158108 93.908183-55.158108 38.510075 0 74.092145 20.924041 92.852182 54.606107a20.012039 20.012039 0 0 0 27.226053 7.748015c9.658019-5.380011 13.124026-17.568034 7.744015-27.226053-25.82205-46.360091-74.798146-75.160147-127.81825-75.160147-51.512101 0-100.652197 28.588056-128.24425 74.606146z"
              fill="" p-id="2192"></path>
            <path
              d="M665.7953 46.812091m-20.014039 0a20.014039 20.014039 0 1 0 40.028078 0 20.014039 20.014039 0 1 0-40.028078 0Z"
              fill="" p-id="2193"></path>
          </svg>
        </el-col>
        <el-col :span="21">
          <div class="sayGoodBy">请早点回家，林不明白会想你的</div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isLogout = false">再卷卷</el-button>
        <el-button type="primary" @click="logout">拜 拜</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'Header',
    data() {

      //#region 自定义验证规则
      var validatePass = (rule, value, callback) => {
        if (this.editPasswordForm.checkPassword !== '') {
          this.$refs.editPasswordFormRef.validateField('checkPassword');
        }
        callback();
      };
      var validatePass2 = (rule, value, callback) => {
        if (value !== this.editPasswordForm.newPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      //#endregion

      return {
        /* 当前登录用户名字 */
        currentUserName: '',
        /* 判断是否为管理员 */
        isAdministrator: true,

        /* 修改密码验证规则表单 */
        editPasswordRules: {
          oldPassword: [{
              required: true,
              message: '请输入旧密码',
              trigger: 'blur'
            },
          ],
          newPassword: [{
              required: true,
              message: '请输入密码',
              trigger: 'blur'
            },
            {
              validator: validatePass,
              trigger: 'blur'
            }
          ],
          checkPassword: [{
              required: true,
              message: '请再次输入密码',
              trigger: 'blur'
            },
            {
              validator: validatePass2,
              trigger: 'blur'
            }
          ],
        },
        /* 修改密码表单 */
        editPasswordForm: {
          oldPassword: '',
          newPassword: '',
          checkPassword: '',

          currentUserId: '',
        },

        isEditPassword: false, //控制我的资料弹出层
        isLogout: false, //控制退出登录弹出层
      }
    },
    methods: {
      /* 导航栏下拉框功能 */
      handleDownBoxCommand(command) {
        if (command === 'toPersonCenter') {
          this.$router.push('/personCenter')
        }
        if (command === 'editPassword') {
          this.isEditPassword = true
        }
        if (command === 'logout') {
          this.isLogout = true
        }
      },
      /* 修改密码弹出层关闭回调 */
      handleCloseEditPassword() {
        this.$refs['editPasswordFormRef'].resetFields();
      },
      /* 修改密码 */
      editPassword() {
        this.$refs.editPasswordFormRef.validate(async valid => {
          if (!valid) return
          const {
            data: res
          } = await this.$http.post('settings/employee/editPassword.do', this.editPasswordForm)
          if (res.code == '1') {
            this.$message.success('修改成功!')
            this.$router.push('/employeeLogin')
          } else {
            this.$refs['editPasswordFormRef'].resetFields();
            this.$message.error('修改失败！' + res.message)
          }
        })
      },
      /* 退出登录*/
      logout() {
        window.localStorage.removeItem('user')
        window.localStorage.removeItem('isRemPwd')
        this.$router.push('/employeeLogin')
      },

      /* 获得权限 */
      async getPrivilege() {
        let user = JSON.parse(window.localStorage.getItem('user'))
        const { data: res } = await this.$http.post('settings/administrator/getPrivilege.do',{
          currentUserId: user.id
        })
        if (res.code == '1') {
          this.isAdministrator = res.others
        } else {
            console.log('判断当前权限失败!')
        }
      },

      /* 获得用户信息 */
      getUser() {
        let user = JSON.parse(window.localStorage.getItem('user'))

        if(user.name == undefined) {
          this.currentUserName = user.loginName
        } else {
          this.currentUserName = user.name
        }

        this.editPasswordForm.currentUserId = user.id
      },
    },
    created() {
      this.getUser()
      this.getPrivilege()
    }
  }

</script>

<style scoped>
  /* 背景部分 */
  .header {
    height: 100%;
    background-color: #3C3C3C;
    color: #FFFFFF;
  }

  /* 网站logo */
  .logo {
    font-size: 1.8em;
    line-height: 60px;
    padding: 0px 10px;
  }

  /* 当前登录用户下拉框 */
  .el-dropdown {
    margin-right: 10px;
    float: right;
    font-size: 20px;
    line-height: 60px;
    cursor: pointer;
    color: #FFFFFF;
    padding: 0px 10px;
  }

  /* 退出登录弹出层 */
  .sayGoodBy {
    line-height: 30px;
    color: #FD79A8;
    font-size: 18px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

</style>
